import React, { Component } from "react";
import { Link, Route } from "react-router-dom";
import Detail from "./Detail";

export default class Message extends Component {
    state = {
        messageArr: [
            { id: "01", title: "消息1" },
            { id: "02", title: "消息2" },
            { id: "03", title: "消息3" },
        ],
    };

    render() {
        return (
            <div>
                <ul>
                    {this.state.messageArr.map((n) => {
                        return (
                            <li key={n.id}>
                                <Link
                                    to={`/home/message/detail/${n.id}/${n.title}`}
                                >
                                    {n.title}
                                </Link>
                            </li>
                        );
                    })}
                </ul>
                <hr />
                {/* 声明接收 params 参数 */}
                <Route
                    path="/home/message/detail/:id/:title"
                    component={Detail}
                />
            </div>
        );
    }
}
